<template>
	<uni-popup ref="popup" :is-mask-click="false">
		<view class="relative">
			<image class="close-icon" src="@/static/svg/icon-close.svg" @click="onClose"></image>
			<view class="popup-content">
				<view class="title"><text>联系客服</text></view>
				<slot></slot>
			</view>
			<slot name="footer"></slot>
		</view>
	</uni-popup>
</template>

<script setup name="FloatDialog">
	import { ref } from 'vue'
	
	const props = defineProps({
		
	})
	
	const popup = ref(null)
	
	const onClose = () => {
		popup.value?.close()
	}

	const showDialog = (value) => {
		if (value) {
			popup.value?.open()
		} else {
			popup.value?.close()
		}
	}
	
	defineExpose({
		showDialog
	})
</script>

<style lang="scss" scoped>
	
	.close-icon {
		position: absolute;
		width: 32px;
		height: 32px;
		right: 0;
		top: -44px;
	}
	.popup-content {
		padding: 24px 16px;
		border-radius: 12px;
		background: #F5F5F5;
		width: calc(100vw - 48px);
		
		.title {
			color: #333;
			text-align: center;
			font-family: PingFang SC;
			font-size: 16px;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
			margin-bottom: 20px;
		}
		
		
	}
</style>